<template>
  <div class="article">
    <template>
      <h2 class="article-news-title">{{ news.title }}</h2>
      <div class="article-center">
        作者：
        {{ news.author }}
        &ensp;
        {{ news.time }}
        &ensp; 点击量：
        {{ news.clicks }}
      </div>
      <hr />
      <p class="article-news-content" v-html="news.content"></p>
    </template>
    <Share />
    <PreviousNext
      url="/lookup/industrydynamics"
      title="行业动态"
      :article="4"
    />
  </div>
</template>
<script>
// 引入Share组件
import Share from "@/pages/Share/Share";
// 引入PreviousNext组件
import PreviousNext from "@/pages/Article/PreviousNext";
// 调用封装的好requests
import requests from "@/api/request";
// 引入QS库
import Qs from "qs";
export default {
  name: "IndustryArticle",
  components: { Share, PreviousNext },
  data() {
    return {
      news: [],
      id: this.$route.query.id,
    };
  },
  watch: {
    $route(to, from) {
      this.id = to.query.id;
      const update = (params) => {
        return requests({
          url: "/lookup/industrydynamics",
          method: "post",
          data: Qs.stringify(
            { page: 1 }, //将对象序列化成URL的形式，以&进行拼接
            { indices: false } //重写false
          ),
          params: { id: this.id }, //向服务器数据库发送id
        });
      };
      update().then((res) => {
        const morenews = res.data; //接收返回值
        this.news = morenews; //news接收数据
      });
    },
  },
  created() {
    const notice = (params) => {
      return requests({
        url: "/lookup/industrydynamics",
        method: "post",
        data: Qs.stringify({ page: 1 }, { indices: false }),
        params: { id: this.id },
      });
    };
    notice().then((res) => {
      const moreindustry = res.data;
      this.news = moreindustry;
    });
  },
};
</script>
